<template>
  <div>
    <section @click="toDetails(isMessage, msgList.article_id)">
      <div class="header">
        <p>{{ title(msgList.title, msgList.article_type) }}</p>
        <p>{{ time(msgList.update_time, msgList.article_time) }}</p>
      </div>
      <div class="content">
        <img src="@/assets/img/login/logo.png" alt="" />
        <div v-if="isMessage" class="orderMsg">
          <p>{{ msgList.content }}</p>
          <p>
            订单编号：<span>{{ msgList.isread }}</span>
          </p>
        </div>
        <div v-else class="platformMsg">
          <p>{{ msgList.article_title }}</p>
          <p>{{ msgList.article_intro }}</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    msgList: {
      type: Object
    },
    isMessage: {
      type: Boolean
    }
  },
  data() {
    return {};
  },
  methods: {
    time(orderTime, platformTime) {
      if (orderTime === undefined) {
        return platformTime;
      } else {
        return orderTime;
      }
    },
    title(orderTitle, platformTitle) {
      if (orderTitle === undefined) {
        if (platformTitle === 1) {
          return "平台公告";
        } else {
          return "其他公告";
        }
      } else {
        return orderTitle;
      }
    },
    toDetails(type, id) {
      if (!type) {
        this.$router.push({
          path: "/platform-announcement/" + id
        });
      }
    }
  }
};
</script>

<style scoped lang="stylus">
section{
  padding 24px;
  background-color #ffffff;
  margin-top 24px;
}
section>div{
  display flex;
}
.header{
  justify-content space-between;
}
.header>p:first-child{
  font-size 24px;
  line-height 43px;
}
.header>p:last-child{
  font-size 22px;
  line-height 43px;
  color #666666;
}
.content{
  border-radius:8px 16px 16px 8px;
  background-color #F0F0F0;
  width 100%;
}
.content>img{
  width: 174px;
  height: 174px;
}
.content>div{
  margin: 15px 0 10px 23px;
}
  .orderMsg{
    display flex
    align-content space-between
    flex-wrap:wrap
    width 100%
    overflow hidden
  }
.orderMsg>p{
  display flex;
  width 100%;
}

.orderMsg>p:first-child{
  font-size 26px;
  line-height 43px;
  width 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.orderMsg>p:last-child{
  font-size 26px;
  line-height 43px;
  color #333333;
}
.orderMsg>p:last-child>span{
  color #666666;
}
.platformMsg{
  width 100%;
  overflow hidden
}
.platformMsg>p:first-child{
  font-size:26px;
  font-weight:500;
  color:#333333;
  line-height:43px;
  width 100%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.platformMsg>p:last-child{
  font-size:26px;
  font-weight:500;
  color:#666666;
  line-height:43px;
  margin-top: 15px
  width 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
